import React, { Component } from 'react'

let arr=[
    {'titleName':'首页'},
    {'titleName':'·'},
    {'titleName':'手机'},
    {'titleName':'·'},
    {'titleName':'“足迹”系列'},
    {'titleName':'·'},  
    {'titleName':'官方配件'},
    {'titleName':'·'},  
    {'titleName':'空气净化器类'},
    {'titleName':'·'},  
    {'titleName':'品牌周边'},
    {'titleName':'·'},  
    {'titleName':'第三方商品'},
    {'titleName':'·'},  
    {'titleName':'全部'},
    {'titleName':'·'},  
    {'titleName':'服务'},
    {'titleName':'·'},  
    {'titleName':'企业团购'},
]

let style={
    uls:{
        'listStyle':'none',
        'padding':'0px',
    },
    lis:{
        // 'float':'left',
        'marginRight':'10px',
        'display':'inline-block',
    },
    fonts:{
        'fontSize':'14px',
        'textDecoration':'none',
        'color':'#555555',
    }
}

class Lis extends Component {
    constructor(props) {
        super(props)
        this.state = {
            
        }
    }
    render() {
        const { lis } = this.props
        return <li className="lis" style={style.lis}>
            <a className='fonts' style={style.fonts}>
                {lis.titleName}
            </a>
        </li>
    }
}

class Uls extends Component {

    render() {
        return <ul className="uls" style={style.uls}>
            {arr.map((lis, index) => <Lis lis={lis} key={index}/>)}
        </ul>
    }
}

export default Uls